<script setup>
// 导入第三方模块
import { ref } from "vue";
const props = defineProps(["product", "shopName", "min"]);

// 仓库
import useCartStore from "@/stores/cart.js";
import router from "@/router";
const cartStore = useCartStore();

/**
 * 增加商品
 */
const addCart = () => {
  props.product.number++;
  // 查询购物车
  let res = cartStore.cartList.find((item) => item.name == props.shopName);

  // 存在
  if (res) {
    // 查询商品
    let res1 = res.list.find((item) => item.id == props.product.id);
    // 商品不存在
    if (!res1) {
      res.list.push(props.product);
    }

    // 不存在
  } else {
    let cart = {
      name: "",
      list: [],
    };
    (cart.name = props.shopName), cart.list.push(props.product);

    cartStore.cartList.push(cart);
  }

  console.log(cartStore.cartList);
};

/**
 * 减少商品
 */

const subCart = () => {
  // 查询购物车
  let res = cartStore.cartList.find((item) => item.name == props.shopName);
  // 存在
  if (res) {
    // 查询商品
    let res1 = res.list.find((item) => item.id == props.product.id);
    // 商品存在
    if (res1) {
      console.log(res.list);
      // 减少商品
      if (res1.number != 0) {
        res1.number--;
      }
      // 删除商品
      if (res1.number == 0) {
        res.list = res.list.filter((item) => item.id != res1.id);
      }
    }
  }

  console.log(cartStore.cartList);
};





</script>

<template>
  <div class="product">
    <div :class="[props.min ? 'product_img--min' : 'product_img']">
      <!-- <div class="product_img--min"> -->
      <img
        :src="`http://www.dell-lee.com/imgs/vue3/${props.product.imgName}.png`"
        alt=""
      />
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ props.product.title }}</div>
      <div class="product_content_sales">月售 {{ props.product.sales }} 件</div>
      <slot></slot>
      <div class="product_content_price">
        ￥{{ props.product.price }}
        <span class="product_content_old_price"
          >￥{{ props.product.price }}</span
        >
      </div>
    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="subCart">-</span>
      {{ props.product.number }}
      <span class="product_number_plus" @click="addCart">+</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
@import "@/style/mixins.scss";
.product {
  padding: 0.18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: 0.01rem solid $content-bgColor;

  &_img {
    width: 0.68rem;
    margin-right: 0.18rem;

    img {
      width: 0.68rem;
      height: 0.68rem;
    }
  }
  &_img--min {
    width: 0.48rem;
    margin-right: 0.18rem;

    img {
      width: 0.48rem;
      height: 0.48rem;
    }
  }
  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: 0.14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }
    &_price {
      color: $hightlight-fontColor;
    }
    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }
  &_number {
    position: absolute;
    right: 0.18rem;
    bottom: 0.18rem;

    &_minus,
    &_plus {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      font-size: 0.16rem;
      text-align: center;
    }
    &_minus {
      border: 0.01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: 0.08rem;
    }
    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: 0.08rem;
    }
  }
}
</style>